<template>
    <div :class="classname" id="page1Echart1"></div>
</template>

<script>
export default {
    name: 'page1Echart1',
    props: {
        classname:[String],
        deviceNumberData:[Object,Array],
    },
    data: function () {
        return {
            deviceNumberDataNew: {}
        }
    },
    methods: {
        myEcharts(){
            var _this = this.$echarts;
            var dataArr = this.deviceNumberDataNew.dataArr;
            var colors = [
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(86, 255, 136, 1)'}, {offset: 1, color: 'rgba(154, 255, 183, 1)'} ], global: false },
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(255, 166, 21, 1)'}, {offset: 1, color: 'rgba(255, 212, 143, 1)'} ], global: false },
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(159, 54, 248, 1)'}, {offset: 1, color: 'rgba(227, 171, 255, 1)'} ], global: false },
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(255, 81, 130, 1)'}, {offset: 1, color: 'rgba(255, 157, 194, 1)'} ], global: false },
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(73, 231, 255, 1)'}, {offset: 1, color: 'rgba(164, 243, 255, 1)'} ], global: false },
                {type: 'linear', x: 1, y: 0, x2: 0, y2: 0, colorStops: [{offset: 0, color: 'rgba(52, 111, 249, 1)'}, {offset: 1, color: 'rgba(132, 169, 255, 1)'} ], global: false }
            ]
            var data = []
            for (let i = 0; i < dataArr.length; i++) {
                data.push(
                    {
                        name: dataArr[i].name,
                        value: dataArr[i].value,
                    },
                )
            }
            var data2 = []
            for (let i = 0; i < dataArr.length; i++) {
                data2.push(
                    {
                        name: dataArr[i].name,
                        value: dataArr[i].value,
                    },
                )
            }
            var myChart = _this.init(document.getElementById('page1Echart1'));
            //配置图表
            var option = {
                color: [colors[0],colors[1],colors[2],colors[3],colors[4],colors[5]],
                title: {
                    text: this.deviceNumberDataNew.sbzs+'',
                    subtext: "设备总数",
                    x: "24%",
                    y: "36%",
                    itemGap: 8,
                    textStyle: {
                        color: "#FFFFFF",
                        fontSize: 22,
                        textShadowColor: 'rgba(190, 246, 255, .5)',
                        textShadowBlur: 10,
                        fontFamily: 'YouSheBiaoTiHei'
                    },
                    subtextStyle: {
                        color: "#DDFAFF",
                        fontSize: 12,
                    },
                    textAlign: 'center'
                },
                tooltip: {
                    show: false
                },
                legend: {
                    left: '65%',
                    top: 'center',
                    width: '30%',
                    icon: 'rect',
                    itemWidth: 7,
                    itemHeight: 7,
                    textStyle: {
                        fontSize: 12,
                        color: '#FFFFFF',
                        rich: {
                            title: {
                                padding: [4, 0, 4, 0],
                                fontSize: 12,
                                color: '#FFFFFF',
                            },
                            value: {
                                fontSize: 16,
                                color: '#FFFFFF',
                                fontWeight: 'bold'
                            },
                        },
                    },
                    formatter: function (name) {
                        var dataArrValue = [];
                        for(var i = 0; i < dataArr.length; i++) {
                            if(dataArr[i].name == name) {
                                dataArrValue.push(dataArr[i].value)
                            }
                        }
                        return '{title|'+name+'}\n{value|'+dataArrValue+'}'
                    }
                },
                grid: {
                    left: '5%',
                    top: '20%',
                    right: '8%',
                    bottom: '8%',
                    containLabel: true
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['55%', '70%'],
                        hoverAnimation: false,
                        center: ['25%', '50%'],
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                    },
                    {
                        name: '',
                        type: 'pie',
                        radius: ['45%', '55%'],
                        hoverAnimation: false,
                        center: ['25%', '50%'],
                        itemStyle: {
                            opacity: .2
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: data2
                    },
                    {
                        name: '',
                        type: 'pie',
                        radius: ['0', '40%'],
                        hoverAnimation: false,
                        center: ['25%', '50%'],
                        itemStyle: {
                            normal: {
                                labelLine: {
                                    show: false,
                                },
                                color: new _this.graphic.RadialGradient(0.5, 0.5, 1, [
                                    {
                                        offset: 1,
                                        color: 'rgba(50,171,241, 0)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(50,171,241, .4)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(55,70,130, 0)',
                                    },
                                ]),
                                shadowBlur: 60,
                            },
                        },
                        data: [
                            {
                                value: 100,
                            },
                        ],
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
    },
    mounted(){},
    watch: {
        deviceNumberData(newData) {
            this.deviceNumberDataNew = newData
            this.myEcharts()
        }
    }
}
</script>

<style>
.box-tooltip-page1Chart2{
    position: absolute;
    padding: 0 8px !important;
    border: 1px solid #00DAFC !important;
    background: rgba(10,76,86,0.6) !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    line-height: 36px !important;
    border-radius: 0 !important;
    display: none;
}
.box-tooltip-page1Chart2::before{
    margin-top: -3.5px;
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 5px;
    height: 7px;
    background: url(~@/assets/images/icon-8.png) no-repeat 100% 100%;
}
</style>